<template>
  <div class='tinymce'>
    <h1>
      <el-row>
        <el-col :span="5">
          <span v-if="dataViedo">编辑视频</span>
          <span v-else>添加视频</span>
          <el-button class="addBtn" @click="goBack">返回</el-button>
        </el-col>
        <el-col :span="19" style="text-align:right">
           <el-button type="success" @click="submitArticle('formAling')">保存</el-button>
        </el-col>
      </el-row>
    </h1>
    <h3>
      <el-form :inline="true"  :rules="form1" ref="form1" :model="form1">
        <el-form-item label="分类">
          <el-select  v-model="form1.value" placeholder="请选择" style="width:120px">
          <el-option
            v-for="item in form1.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select  v-model="marksVal" multiple collapse-tags placeholder="请选择" style="width:180px">
          <el-option
            v-for="item in marks"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form1.line" placeholder="请选择状态" style="width:120px">
            <el-option v-for="item in form1.lines" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布者ID">
          <el-select v-model="form1.hlpe" placeholder="情选择ID" style="width:120px">
            <el-option v-for="item in form1.hlpes" :key="item.userId" :label="item.userNick" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item  prop="type">
          <el-checkbox-group v-model="form1.type">
            <el-checkbox label="首页推荐文章"  name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
          <el-form-item v-if="dataViedo" label="喜欢">
            <el-input v-model="form1.favorites" style="width:80px" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item v-if="dataViedo" label="点击量">
            <el-input v-model="form1.page_view" style="width:80px" placeholder="请输入内容"></el-input>
          </el-form-item>
          
      </el-form>
     <el-form  label-width="70px" :rules="aling" ref="formAling" :model="formLabelAlign">
        <el-form-item label="视频标题" prop="title">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
        <el-form-item label="视频描述" prop="desc">
          <el-input style="height:146px" type="textarea" v-model="formLabelAlign.desc"></el-input>
        </el-form-item>
        
      </el-form>
      <el-row>
        
        <el-col :span="12" style="display:flex">
          <span style="font-weight:normal;font-size:14px">上传视频：</span>
          <el-upload
            style="display:inline-block"
            :action="action"
            class="avatar-uploader"
            accept="video/*"
            :show-file-list="aaa"
            :data="postData"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus avatar-uploader-iconInfo"></i>
            <img v-if="videImgurl" :src="videImgurl" class="avatarInfo">
          </el-upload> 
         
          <el-upload 
              style="display:inline-block"
              accept="video/*"
              :show-file-list="false"
              class="avatar-uploaderInfo"
              :action="action"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :data="postData">
              <img v-if="videImgurl" :src="videImgurl" class="avatarInfo">
              <i v-else class="el-icon-plus avatar-uploader-iconInfo"></i>
            </el-upload>
        </el-col>
        <el-col :span="12" style="display:flex">
          <span style="font-weight:normal;font-size:14px">上传封面：</span>
          
          <el-upload
            style="display:inline-block"
            class="avatar-uploaderInfo"
             :show-file-list="false"
            :action="action"
            :data="postData"
            :on-success="handleSuccess1"
            :on-preview="handlePictureCardPreview1"
            :on-remove="handleRemove1">
            <img v-if="titleImgurl" :src="titleImgurl" class="avatarInfo">
              <i v-else class="el-icon-plus avatar-uploader-iconInfo"></i>
          </el-upload>
          <!-- <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="titleImgurl" alt="">
          </el-dialog> -->
        </el-col>
        <!-- <el-col :span="3">
          <img :src="titleImgurl" v-show="titleImgurl" style="width:120px;height:150px;maring-left:50px" />
        </el-col> -->
      </el-row>
    </h3>
   
  </div>
</template>

<script>
import qnUrl from '@/Http/qiniuUrl'
import Http from '@/Http/Http'
export default {
  name: 'tinymce',
  props:['dataViedo'],
  data () {
    const title = (rule,value,callback) => {
      if (value === '') {
        callback(new Error('请输入视频标题'))
      } else {
        callback()
      }
    }
    const desc = (rule,value,callback) => {
      if (value === '') {
        callback(new Error('请输入视频描述'))
      } else {
        callback()
      }
    }
    return {
      aaa:true,
      action:qnUrl,//七牛的上传地址
      videoUrl:'',//视频url    videoUrl   videImgurl
      videImgurl:'',//封面
      titleImgurl:'',//手动上传封面
      url:'',
      tinymceHtml: '请输入内容',
      marks:[],//标签
      marksVal:[],
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVisible1:false,
      postData:{
        token:'',
      },
      form1:{
        page_view:0,
        favorites:0,
        hlpe:10001,
        hlpes:[
          {value:10001,label:'无C端用户'},
        ],
        line:1,
        value:0,
        lines:[
          {value:1,label:'上线'},
          {value:2,label:'下线'}
        ],
        type:false,
        options:[{
           value:0,
          label:'全部'
        },{
          value:1,
          label:'牙齿矫正'
        },{
          value:2,
          label:'种植牙'
        },{
          value:3,
          label:'口腔健康'
        },{
          value:4,
          label:'儿童口腔'
        }],
      },
      formLabelAlign:{
        title:'',
        desc:''
      },
      aling:{
        title:[
          {validator:title,trigger:'blur'}
        ],
        desc:[
          {validator:desc,trigger:'blur'}
        ]
      },
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/lightgray',
        height: 300,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      }
    }
  },
  created() {
    this.getToken();
    if(this.article) {
      this.tinymceHtml = this.article.ohtml
    } else {
      this.tinymceHtml = '请输入内容'
 
    }
  },
 

  methods:{
    getToken(val){
      if(this.dataViedo){
        this.form1.value = this.dataViedo.type? this.dataViedo.type:0;
        this.form1.line = this.dataViedo.video.status?this.dataViedo.video.status:1;
        this.form1.hlpe = this.dataViedo.userInfo.userId;
        this.form1.favorites = this.dataViedo.video.favorites?this.dataViedo.video.favorites:0 //点赞数
        this.form1.page_view = this.dataViedo.video.page_view?this.dataViedo.video.page_view:0 //点赞数
        this.formLabelAlign.desc = this.dataViedo.video.description;
        this.formLabelAlign.title =  this.dataViedo.video.title;
       
        this.dataViedo.marks.forEach(item=>{
          this.marksVal.push(item.id)
        })
        if(this.dataViedo.isRecommend){
          this.form1.type = true
        } else {
          this.form1.type = false
        }   // 推荐 
        this.titleImgurl = this.dataViedo.video.source_thum;  
        this.videoUrl = this.dataViedo.video.source_url;
         this.videImgurl = this.dataViedo.video.source_url+'?vframe/jpg/offset/2/w/80/h/100';
      }
      
       Http.getCuser({})
      .then( res => {
        this.form1.hlpes  = res.data.data;
        this.form1.hlpe = res.data.data[0].userId
       
      })

      Http.QiniuToken({})
      .then( res => {
        this.postData.token = res.data.data.uptoken;
        this.url = res.data.data.domain
      })
      .catch( error => {
        
      })
      

      Http.getMarklist({pageIndex:1,pageSize:50,type:3})
      .then( res => {
        this.marks = res.data.data.rows;
        
      })
      .catch( error => {
        
      })
    },
    handleRemove(file, fileList) {
      
    },
    handleRemove1(file, fileList) {
      
      this.titleImgurl="";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreview1(file) {
      this.titleImgurl = file.url;
      this.dialogVisible1 = true;
    },
   
    handleSuccess(responed) {
      this.aaa = false;
        
        this.videoUrl = `http://${this.url}/${responed.key}`; 
        this.videImgurl = `${this.videoUrl}?vframe/jpg/offset/2/w/80/h/100 `;
      },
     handleSuccess1(responed) {
        
        
        this.titleImgurl = `http://${this.url}/${responed.key}`; 
        
      },
    goBack(){
      this.$emit('getUserlist')
      this.$emit('showlist')
    },
    addVideoFun(obj) {
      
      Http.addVideo(obj)
      .then( res => {
        if( res.data.code == 200 ){
          this.$message.success('视频上传成功')          
        } else if(res.data.code == -1003) {
          this.$message.error(`请求失败原因：${res.data.message}`)
          this.$router.push('/')
        }
        this.goBack()
        
      })
      .catch( error => {
        
      })
    },
    eidtVideoFun(obj) {
      
      obj.video.id = this.dataViedo.video.id;
      obj.video.page_view = this.form1.page_view
      obj.video.favorites = this.form1.favorites
      Http.editViedo(obj)
      .then( res => {
        if( res.data.code == 200 ){
          this.$message.success('视频修改成功')          
        } else if(res.data.code == -1003) {
          this.$message.error(`请求失败原因：${res.data.message}`)
          this.$router.push('/')
        }
        this.goBack()
        
      })
      .catch( error => {
        
      })
    },
    submitArticle(val) {
     
      let  isRecommend='';
      if (this.form1.type) {
        isRecommend = 1;
      } else {
        isRecommend = 0;
      }
      this.$refs[val].validate( valid => {
        if (valid) {
          const params = {
            "type":this.form1.value,
            "isRecommend": isRecommend, //,0 / 1。推荐
             "markIds":this.marksVal,
            "video":{
              "user_id":this.form1.hlpe,
              "description":this.formLabelAlign.desc,
               "title":this.formLabelAlign.title,
              "source_url":this.videoUrl, //url,    formLabelAlign:{ title:'', desc:'' },
              "status":  this.form1.line,//1/2 状态,
             
                  //0 /1 /2 /3 /4. 全部,
            }
          }
          this.titleImgurl ? params.video.source_thum = this.titleImgurl : params.video.source_thum = this.videImgurl;
      
          this.dataViedo ? this.eidtVideoFun(params) : this.addVideoFun(params);
        }
      }) 
    }
  }
}
</script>
<style>
.el-textarea__inner{
  height:146px
}
.avatar-uploaderInfo .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploaderInfo .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-iconInfo {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatarInfo {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
